<template>
    <div class="app-container">
        <div class="title">绩效考核打分</div>
        <div class="add-btn">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="" prop="date">
                    <el-date-picker
                    v-model="queryParams.examineTime"
                    type="month"
                    value-format="YYYY-MM"
                    :clearable="false"
                    />
                </el-form-item>
                <el-form-item label="" prop="kpiType">
                    <el-select
                        v-model="queryParams.examineId"
                        placeholder="请选择"
                        style="width: 200px"
                        >
                        <el-option
                            v-for="item in kpiTypeList"
                            :key="item.examineId"
                            :label="item.examineName"
                            :value="item.examineId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border height="500">
                <el-table-column
                    v-for="item of tableDataColumn"
                    :key="item"
                    :prop="item.prop"
                    :label="item.label"
                    align="center">
                    <template #header="scope">
                        <div v-if="scope.column.label.includes('-')">
                            <div>{{ scope.column.label.split(" - ")[0] }}</div>
                            <div>{{ scope.column.label.split(" - ")[1] }}</div>
                        </div>
                        <div v-else>{{ scope.column.label }}</div>
                    </template>
                    <template #default="scope">
                        <el-input
                            v-model.number="scope.row[scope.column.property]"
                            :disabled="['userName', 'compositeScore'].includes(scope.column.property) ? true : false"
                            :type="scope.column.property.includes('userName') ? 'text' : 'number'"
                            @blur="blur(scope)"
                            @keydown="inputLimit">
                        </el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="getTableData"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>
<script setup>
import { getHeaderField, getList, saveList } from '@/api/kpi/kpiGrade.js';
import { getNameList } from "@/api/kpi/analyzeRanking.js";
import { onMounted } from 'vue';

const queryParams = ref({
    examineTime: '',
    examineId: ''
});
const kpiTypeList = ref([])
const tableData = ref([])
const tableDataColumn = ref([])

const total = ref(0) // 总数
const currentPage = ref(1) // 当前页数
const pageSize = ref(10) // 多少条一页

onMounted(() => {
    getDate()
    getNameListData()
})
function getNameListData () {
    getNameList().then( res => {
        if(res.code == 200) {
            kpiTypeList.value = res.data;
            queryParams.value.examineId = res.data[0].examineId;
            handleQuery()
        }
    })
}
// 查询表头
function handleQuery(){
    getHeaderField(queryParams.value).then(res=>{
        if(res.data.length) {
            let columnArr = []
            res.data.forEach((v, i)=>{
                columnArr.push(
                    {
                        label: v,
                        prop: `score${i+1}`
                    }
                )
            })
            columnArr.unshift(
                {
                    label: '成员',
                    prop: 'userName'
                }
            )
            columnArr.push(
                {
                    label: '汇总',
                    prop: 'compositeScore'
                }
            )
            tableDataColumn.value = columnArr
            getTableData()
        }
    })
}
// 获取表格数据
function getTableData() {
    let url = `/performance/examine/grade/page/list?pageNum=${currentPage.value}&pageSize=${pageSize.value}&examineId=${queryParams.value.examineId}&examineTime=${queryParams.value.examineTime}`
    getList(url).then(res=>{
        tableData.value = res.rows;
        total.value = res.total
    })
}

// 表格输入框失去焦点则判断计算汇总分数
function blur (scope) {
    let num = Number(scope.row[scope.column.property]);
    if (num) {
        if(num > 9999){
            ElMessage({
                message: '不能超过10000!',
                type: 'error',
                plain: true,
            })
            return
        }
        let params = scope.row
        saveList(params).then(res=>{
            ElMessage({
                message: '修改成功!',
                type: 'success',
                plain: true,
            })
            getTableData()
        })
    }
}
function inputLimit (e) {
    let key = e.key
    // 不允许输入'e'和'+'、'-'、'Shift'
    if (['e', '+', '-', 'shift'].includes(key)) {
        e.returnValue = false
        return false
    }
    return true
}
//转换时间方法
function getDate(){
    var time = new Date(new Date().getTime());
    var year= time.getFullYear()  //年
    var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
    var mydate = year + "-" + month;
    queryParams.value.examineTime = mydate
}
</script>
<style lang="scss" scoped>
.title {
    border-bottom: 1px solid #ddd;
}
.add-btn {
    margin: 10px 0;
}
::v-deep .el-input__inner {
    text-align: center;
}
.pagination-box{
    display: flex;
    justify-content: right;
    margin-top: 10px;
}
</style>